<template>
  <div class="cooperation-box">
    <div class="banner-box" :style="{backgroundImage: 'url(' + concatInfo.topUrl + ')'}"></div>
    <!-- 物联网智库 -->
    <div class="part1-box">
      <PartTitle :data="part1Title" />
      <div class="content-box">
        <div class="left" v-html="concatInfo.desc"  style="white-space: pre-wrap;"></div>
        <div class="right" :style="{backgroundImage: 'url(' + concatInfo.descUrl + ')'}"></div>
      </div>
    </div>
    <!-- 联系我们 -->
    <div class="part2-box" ref="toTwo" >
      <PartTitle :data="part2Title" />
      <div class="content-box">
        <div class="left"></div>
        <div class="right">
          <div class="item-card" v-for="(item, index) of concatInfo.contactList" :key="index">
            <div class="title">{{item.name}}</div>
            <div class="desc">{{item.contact}}</div>
            <div class="icon" :class="{weixin: item.type === '微信', email: item.type === '邮箱', mobile: item.type === '电话'}"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 标题
import PartTitle from '@/views/institute/components/PartTitle';
import { GlobalConfig } from '@/api/api';

export default {
  components: {
    PartTitle
  },
  data() {
    return {
      part1Title: {
        img: require('../../assets/banner.png'),
        title: '物联网智库'
      },
      part2Title: {
        img: require('../../assets/banner.png'),
        title: '联系我们'
      },
      part2Data: [
        {
          img: require('../../assets/hezuo_wx.png'),
          title: '需求报道',
          desc: 'weiixnhao001'
        },
        {
          img: require('../../assets/hezuo_wx.png'),
          title: '商务合作微信号',
          desc: 'shangwuhezuo007'
        },
        {
          img: require('../../assets/hezuo_email.png'),
          title: '邮箱',
          desc: 'asdfasdfa@163.com'
        },
        {
          img: require('../../assets/hezuo_mobile.png'),
          title: '电话',
          desc: '010-32423423'
        }
      ],
      concatInfo: {}
    }
  },
  mounted() {
    this.getConfig();
    if (this.$route.query.to) {
      setTimeout(() => {
        this.$refs.toTwo.scrollIntoView();
      }, 200);
    }
  },
  methods: {
    async getConfig() {
      const params = {
        key: 'cooperationManageData'
      };
      const res = await GlobalConfig(params);
      this.concatInfo = JSON.parse(res.value) || {};
    }
  }
}
</script>

<style lang="scss" scoped>
.cooperation-box {
  background: #f1f1f1;
  .banner-box {
    width: 100%;
    height: 200px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-bottom: 52px;
  }
  .part1-box {
    padding-bottom: 52px;
    .content-box {
      width: 1180px;
      margin: 32px auto 52px;
      overflow: hidden;
      .left {
        width: 700px;
        font-size: 16px;
        
        font-weight: 400;
        color: #272727;
        line-height: 28px;
        float: left;
        margin-right: 40px;
        .item {
          margin-bottom: 28px;
        }
        /deep/img {
          max-width: 100%;
          object-fit: contain;
        }
        /deep/pre {
          white-space: pre-wrap;
          word-wrap: break-word;
          word-break: break-all;
        }
      }
      .right {
        width: 440px;
        height: 476px;
        background: url('../../assets/hezuo_zhiku.png') no-repeat;
        background-size: cover;
        float: left;
      }
    }
  }
  .part2-box {
    padding-bottom: 72px;
    .content-box {
      width: 1180px;
      margin: 32px auto 0;
      overflow: hidden;
      .left {
        width: 700px;
        height: 424px;
        background: url('../../assets/address-map.png') no-repeat;
        background-size: cover;
        float: left;
        margin-right: 40px;
      }
      .right {
        float: left;
        .item-card {
          width: 440px;
          height: 88px;
          background: #F9F9F9;
          border-radius: 4px;
          border: 1px solid #F1F1F1;
          box-sizing: border-box;
          padding: 16px 64px 0 30px;
          margin-bottom: 24px;
          position: relative;
          .title {
            height: 30px;
            font-size: 20px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #272727;
            line-height: 30px;
          }
          .desc {
            height: 24px;
            font-size: 16px;
            
            font-weight: 400;
            color: #4C4C4C;
            line-height: 24px;
          }
          .icon {
            width: 48px;
            height: 48px;
            background-repeat: no-repeat;
            background-size: cover;
            position: absolute;
            top: 20px;
            right: 64px;
            &.weixin {
              background-image: url('../../assets/hezuo_wx.png');
            }
            &.email {
              background-image: url('../../assets/hezuo_email.png');
            }
            &.mobile {
              background-image: url('../../assets/hezuo_mobile.png');
            }
          }
        }
      }
    }
  }
}
</style>